<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学生管理系统</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="header">
        <div class="logo">
            <img src="./images/logo.png" alt="#">
            <span>TSCN</span>
        </div>
    </div>
    <div class="left-menu">
        <dl class="menu">
            <dt>学生管理</dt>
            <dd class="active" data-id="student-list">学生列表</dd>
            <dd data-id="student-add">新增学生</dd>
        </dl>
        <!-- dl>dt+dd 类似于 ul>h4+li -->
    </div>
    <div class="right-content">
        <div class="student-add" id="student-add">
            <form id="student-add-form">
                <div><label for="name">姓名</label><input type="text" id="name"></div>
                <div>
                    <label for="">性别</label>
                    <label for="male" class="sex">男</label>
                    <input type="radio" id="male" name="sex" checked="checked" value="0">
                    <label for="female" class="sex">女</label>
                    <input type="radio" id="female" name="sex" value="1">
                </div>
                <div><label for="sNo">学号</label><input type="text" id="sNo"></div>
                <div><label for="email">邮箱</label><input type="text" id="email"></div>
                <div><label for="birth">出生年</label><input type="text" id="birth"></div>
                <div><label for="phone">手机号</label><input type="text" id="phone"></div>
                <div><label for="address">住址</label><input type="text" id="address"></div>
                <div>
                    <label for=""></label>
                    <input type="submit" id="student-add-submit" class="btn">
                    <input type="reset" class="btn">

                </div>
            </form>


        </div>
        <div class="student-list" id="student-list">
            <table>
                <thead>
                    <tr>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>邮箱</th>
                        <th>年龄</th>
                        <th>手机号</th>
                        <th>住址</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="tBody">
                    <tr>
                        <th>2017212433</th>
                        <th>XXX</th>
                        <th>男</th>
                        <th>771835525@qq.com</th>
                        <th>23</th>
                        <th>13340245237</th>
                        <th>重庆市</th>
                        <th>
                            <button class="edit btn">编辑</button>
                            <button class="del btn">删除</button>
                        </th>
                    </tr>
                </tbody>
            </table>
            <div class="turn-page">
                <button id="prev-btn" class="btn">上一页</button>
                <button id="next-btn" class="btn">下一页</button>
            </div>
            <div class="model">
                <div class="model-content">
                    <h2>编辑表单</h2>
                    <form id="student-edit-form">
                        <div><label for="name1">姓名</label><input type="text" name="name" id="name1"></div>
                        <div>
                            <label for="">性别</label>
                            <label for="male-edit" class="sex">男</label>
                            <input type="radio" id="male-edit" name="sex" checked="checked" value="0">
                            <label for="female-edit" class="sex">女</label>
                            <input type="radio" id="female-edit" name="sex" value="1">
                        </div>
                        <!-- readonly只读 在新增学生的时候就已经确定 不能修改 -->
                        <div><label for="sno-edit">学号</label><input readonly type="text" name="sNo" id="sno-edit"></div>
                        <div><label for="syx-edit">邮箱</label><input type="text" name="email" id="syx-edit"></div>
                        <div><label for="syear-edit">出生年</label><input type="text" name="birth" id="syear-edit"></div>
                        <div><label for="sph-edit">手机号</label><input type="text" name="phone" id="sph-edit"></div>
                        <div><label for="szz-edit">住址</label><input type="text" name="address" id="szz-edit"></div>
                        <div>
                            <label for=""></label>
                            <input type="submit" id="student-edit-submit" class="btn">
                            
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script src="./index.js"></script>
</body>

</html>